import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import './index.less';

const { Header, Sider, Content } = Layout;

function BasicLayout(props) {
  const menuList = [
    {
      icon: 'icon-client',
      title: 'Dashboard',
      path: '/dashboard',
    },
    {
      icon: 'icon-database',
      title: '监控页',
      path: '/',
    },
    {
      icon: 'icon-client',
      title: '全局监控',
      path: '/global',
    },
    {
      icon: 'icon-client',
      title: '服务监控',
      path: '/server',
    },
    {
      icon: 'icon-client',
      title: '用户行为',
      path: '/user',
    },
  ];

  const [selectedKeys, setSelectKeys] = useState([window.location.pathname]);

  const onMenuClick = (route) => {
    props.history.push(route.path);
    setSelectKeys([route.path]);
  };

  return (
    <Layout className="appLayout">
      <Sider trigger={null} collapsible width={280}>
        <div className="logo">
          <h2>G6监控系统</h2>
        </div>
        <Menu theme="dark" mode="inline" selectedKeys={selectedKeys}>
          {menuList.map((v, i) => (
            <Menu.Item key={v.path} onClick={() => onMenuClick(v)}>
              <i className={`iconfont ${v.icon}`}></i>
              <span className="ml-10">{v.title}</span>
            </Menu.Item>
          ))}

          {/* <Menu.Item key="2">
            <i className="iconfont icon-database"></i>

            <span className="ml-10">监控页</span>
          </Menu.Item>
          <Menu.Item key="3" icon={<UploadOutlined />}>
            全局监控
          </Menu.Item>
          <Menu.Item key="4" icon={<UploadOutlined />}>
            服务监控
          </Menu.Item>
          <Menu.Item key="5" icon={<UploadOutlined />}>
            用户行为
          </Menu.Item> */}
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {props.children}
        </Content>
      </Layout>
    </Layout>
  );
}

export default BasicLayout;
